<template>
    <div class="min-h-screen text-white pb-20 pt-[120px]">
        <div class="container mx-auto pt-8 grid grid-cols-2 md:grid-cols-2 items-start gap-10">
            <!-- 左侧产品大图+缩略图+遮罩渐变 -->
            <div class="flex flex-col items-center justify-center relative">
                <img :src="mainImage" alt="Beard Brush Dick Johnson" class="rounded-xl shadow-2xl bg-[#232323] mb-4 w-full object-contain transition-all duration-200" />
                <div class="relative w-full flex justify-between">
                    <!-- 渐变遮罩左+可点icon -->
                    <div class="pointer-events-auto absolute font-bold left-0 top-0 h-full w-8 z-10 flex items-center justify-center cursor-pointer"
                        style="background: linear-gradient(to right, #181818 10%, transparent);"
                        @click="scrollThumbs('left')">
                        <icon-park-left theme="outline" size="20" class="font-bold text-white" />
                    </div>
                    <!-- 渐变遮罩右+可点icon -->
                    <div class="pointer-events-auto absolute right-0 top-0 h-full w-8 z-10 flex items-center justify-center cursor-pointer"
                        style="background: linear-gradient(to left, #181818 10%, transparent);"
                        @click="scrollThumbs('right')">
                        <icon-park-right theme="outline" size="20" class="font-bold text-white" />
                    </div>
                    <!-- 横向滚动缩略图 -->
                    <div class="flex justify-between gap-4 overflow-x-auto scrollbar-thin scrollbar-thumb-[#232323] scrollbar-track-[#181818] py-1 px-1" ref="thumbsRef">
                        <template v-for="(img, idx) in images" :key="img">
                            <img
                                :src="img"
                                @click="mainImage = img"
                                :class="['w-20 h-20 object-cover rounded-lg border cursor-pointer transition-all', mainImage === img ? 'border-[#e02b2b] ring-2 ring-[#e02b2b]' : 'border-transparent hover:border-gray-400']"
                                :alt="'缩略图' + (idx+1)"
                            />
                        </template>
                    </div>
                </div>
            </div>
            <!-- 右侧卡片区 -->
            <div class="flex flex-col gap-2">
                <!-- 品牌 -->
                <div class="uppercase text-xs text-[#e0b96a] tracking-widest">DICK JOHNSON</div>
                <!-- 名称 -->
                <div class="text-3xl font-bold mb-2">Beard Brush Dick Johnson</div>
                <!-- 价格/税 -->
                <div class="text-lg mb-2">$24.90 USD <span class="text-xs text-gray-400 ml-2">Tax included.</span></div>
                <!-- 评分/评价数 -->
                <div class="flex items-center mb-2">
                    <span class="flex text-yellow-400 mr-2">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                    </span>
                    <span class="text-sm text-gray-400">203 reviews</span>
                </div>
                <!-- 库存 -->
                <div class="text-[#e0b96a] mb-4 text-sm font-semibold">A few left in stock!</div>
                <div v-for="sku in product.skuOptions.slice(0, 3)" :key="sku.key" class="mb-5">
                    <div class="text-xs text-gray-500 mb-2">{{ sku.name }}</div>
                    <!-- 图片变体 -->
                    <div v-if="sku.options[0].img" class="flex gap-3">
                        <button v-for="opt in sku.options" :key="opt.value" @click="selectSku(sku.key, opt.value)"
                            :class="[
                                'w-14 h-14 rounded-lg border flex items-center justify-center transition-all',
                                selectedSku[sku.key] === opt.value
                                    ? 'border-rose-500 ring-2 ring-rose-200'
                                    : 'border-gray-200 hover:border-rose-400'
                            ]">
                            <img :src="opt.img" class="w-12 h-12 object-cover rounded" />
                        </button>
                    </div>
                    <!-- 文字变体 -->
                    <div v-else class="flex flex-wrap gap-2">
                        <button v-for="opt in sku.options" :key="opt.value" @click="selectSku(sku.key, opt.value)"
                            :class="[
                                'px-4 py-1.5 rounded border text-sm transition-all',
                                selectedSku[sku.key] === opt.value
                                    ? 'bg-rose-50 border-rose-500 text-rose-600 font-bold'
                                    : 'bg-white border-gray-200 text-gray-700 hover:border-rose-400'
                            ]">{{ opt.label }}</button>
                    </div>
                </div>
                <!-- 数量选择+加入购物车 -->
                <div class="flex items-center justify-between mb-6">
                    <div class="flex bg-[#232323] rounded overflow-hidden mr-4">
                        <button class="px-4 py-2 text-lg font-bold hover:bg-[#353535]">-</button>
                        <span class="px-6 py-2 text-lg font-bold">1</span>
                        <button class="px-4 py-2 text-lg font-bold hover:bg-[#353535]">+</button>
                    </div>
                    <button
                        class="bg-[#e02b2b] hover:bg-[#b81e1e] text-white px-10 py-3 rounded-lg font-bold text-lg shadow-lg transition-all">ADD
                        TO CART</button>
                </div>
                <!-- 产品描述 -->
                <p class="mb-6 text-white text-base font-poppins tracking-wide leading-relaxed">Enjoy your beard grooming sessions with our perfect beard
                    brush, combining style, efficiency, and comfort. The brush features a wooden handle with an elegant
                    satin finish, offering both lightness and sturdiness. The bristles are made of boar hair reinforced
                    with nylon, providing optimal durability and grooming effectiveness.</p>
                <!-- 折叠面板 -->
                <details class="mb-6 bg-[#232323] rounded-lg p-4">
                    <summary class="cursor-pointer font-bold text-white">Payment and shipping</summary>
                    <div class="mt-2 text-gray-400 text-sm">We accept major credit cards and PayPal for secure and
                        convenient checkout. Orders are shipped within 1-2 business days. Standard delivery times vary
                        by region, with express options available at checkout for faster shipping. Plus, we offer free
                        worldwide delivery!</div>
                </details>
            </div>
            <!-- 右侧侧栏推荐 -->
        </div>
        <!-- 评价区 -->
        <div class="container mx-auto mt-16">
            <div class="text-2xl font-bold mb-6">What our customers say</div>
            <div class="overflow-x-auto scrollbar-thin scrollbar-thumb-[#232323] scrollbar-track-[#181818]">
                <div class="flex justify-between gap-6 pb-2">
                    <!-- 评价卡片1 -->
                    <div
                        class="bg-[#232323] rounded-2xl shadow-lg p-6 min-w-[320px] max-w-xs flex-shrink-0 flex flex-col justify-between">
                        <div>
                            <div class="flex items-center mb-2">
                                <span class="flex text-yellow-400 mr-2">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                </span>
                                <span class="text-xs text-gray-400 font-bold">Edwin | Verified buyer</span>
                            </div>
                            <div class="text-gray-200 text-base mb-4">I've been genuinely impressed with this product
                                from Dick Johnson. The quality is immediately noticeable—from the packaging to the feel
                                and performance. It delivers on what it promises, whether it's grooming, styling, or
                                care.</div>
                        </div>
                    </div>
                    <!-- 评价卡片2 -->
                    <div
                        class="bg-[#232323] rounded-2xl shadow-lg p-6 min-w-[320px] max-w-xs flex-shrink-0 flex flex-col justify-between">
                        <div>
                            <div class="flex items-center mb-2">
                                <span class="flex text-yellow-400 mr-2">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                </span>
                                <span class="text-xs text-gray-400 font-bold">Oliver | Verified buyer</span>
                            </div>
                            <div class="text-gray-200 text-base mb-4">This product quickly became part of my daily
                                ritual. It works exactly as advertised and leaves you feeling fresh and confident
                                throughout the day. The texture and scent strike a perfect balance—refined, but with an
                                edge. It's clear Dick Johnson doesn't cut corners when it comes to quality.</div>
                        </div>
                    </div>
                    <!-- 评价卡片3 -->
                    <div
                        class="bg-[#232323] rounded-2xl shadow-lg p-6 min-w-[320px] max-w-xs flex-shrink-0 flex flex-col justify-between">
                        <div>
                            <div class="flex items-center mb-2">
                                <span class="flex text-yellow-400 mr-2">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                </span>
                                <span class="text-xs text-gray-400 font-bold">Jack | Verified buyer</span>
                            </div>
                            <div class="text-gray-200 text-base mb-4">I wasn't expecting much, but this completely
                                surprised me. The effect was immediate, and the performance holds up even on long days.
                                There's a rugged sophistication to it that's hard to describe but easy to appreciate.
                                Definitely not your average grooming product.</div>
                        </div>
                    </div>
                    <!-- 评价卡片4 -->
                    <div
                        class="bg-[#232323] rounded-2xl shadow-lg p-6 min-w-[320px] max-w-xs flex-shrink-0 flex flex-col justify-between">
                        <div>
                            <div class="flex items-center mb-2">
                                <span class="flex text-yellow-400 mr-2">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                </span>
                                <span class="text-xs text-gray-400 font-bold">Matt | Verified buyer</span>
                            </div>
                            <div class="text-gray-200 text-base mb-4">What I love most is how this product adds a little
                                extra swagger without trying too hard. It's masculine, smooth, and gets the job done
                                without fuss. You feel the difference right away, and the compliments haven't hurt
                                either.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 相关推荐区后续补充 -->
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Left, Right } from '@icon-park/vue-next';

export default defineComponent({
    name: 'ProductIndex',
    components: {
        'icon-park-left': Left,
        'icon-park-right': Right,
    },
    data() {
        return {
            images: [
                'https://cdn.shopify.com/s/files/1/0698/4368/1529/files/kasvoseerumi-miehille-luonnollinen-lahikosmetiikkaa.png?v=1722236628&width=2048',
                'https://cdn.shopify.com/s/files/1/0698/4368/1529/files/kasvoseerumi-miehille-luonnollinen-lahikosmetiikkaa.png?v=1722236628&width=2048',
                'https://cdn.shopify.com/s/files/1/0698/4368/1529/files/kasvoseerumi-miehille-luonnollinen-lahikosmetiikkaa.png?v=1722236628&width=2048',
                'https://cdn.shopify.com/s/files/1/0698/4368/1529/files/kasvoseerumi-miehille-luonnollinen-lahikosmetiikkaa.png?v=1722236628&width=2048',
                'https://cdn.shopify.com/s/files/1/0698/4368/1529/files/kasvoseerumi-miehille-luonnollinen-lahikosmetiikkaa.png?v=1722236628&width=2048',
                'https://cdn.shopify.com/s/files/1/0698/4368/1529/files/kasvoseerumi-miehille-luonnollinen-lahikosmetiikkaa.png?v=1722236628&width=2048',
                'https://cdn.shopify.com/s/files/1/0698/4368/1529/files/kasvoseerumi-miehille-luonnollinen-lahikosmetiikkaa.png?v=1722236628&width=2048',
                'https://cdn.shopify.com/s/files/1/0698/4368/1529/files/kasvoseerumi-miehille-luonnollinen-lahikosmetiikkaa.png?v=1722236628&width=2048',
            ],
            mainImage: 'https://cdn.shopify.com/s/files/1/0698/4368/1529/files/kasvoseerumi-miehille-luonnollinen-lahikosmetiikkaa.png?v=1722236628&width=2048',
            thumbsRef: null as HTMLDivElement | null,
            selectedSku: {} as Record<string, string>,
            product: {
                mainImage: 'https://images.unsplash.com/photo-1519125323398-675f0ddb6308',
                title: 'Men\'s Stainless Fashion Round Dial Analog Quartz Watch, Waterproof, Luminous, Business Watch',
                price: 2.08,
                priceMin: 2.08,
                priceMax: 2.08,
                sold: 5300,
                rating: 4.7,
                reviewCount: 300,
                reviews: [
                    { id: 2, user: 'Alice', avatar: 'https://randomuser.me/api/portraits/women/2.jpg', date: '2024-05-02', content: 'Nice quality.', rate: 4 },
                    { id: 3, user: 'Alice', avatar: 'https://randomuser.me/api/portraits/women/2.jpg', date: '2024-05-02', content: 'Nice quality.', rate: 4 }
                ],
                attributes: [
                    { name: 'Brand', value: 'THE FADE' },
                    { name: 'Movement', value: 'Quartz' },
                    { name: 'Waterproof', value: 'Yes' },
                    { name: 'Material', value: 'Stainless Steel' },
                    { name: 'Dial Diameter', value: '40mm' },
                    { name: 'Strap', value: 'Steel' }
                ],
                detailImages: [
                    'https://images.unsplash.com/photo-1519125323398-675f0ddb6308',
                    'https://images.unsplash.com/photo-1465101046530-73398c7f28ca'
                ],
                packagingImage: 'https://images.unsplash.com/photo-1519125323398-675f0ddb6308',
                recommend: [
                    { id: 1, img: 'https://images.unsplash.com/photo-1465101046530-73398c7f28ca', title: 'Men\'s Digital Watch', price: 1.99 },
                    { id: 2, img: 'https://images.unsplash.com/photo-1519125323398-675f0ddb6308', title: 'Classic Analog Watch', price: 2.99 }
                ],
                skuOptions: [
                    {
                        name: 'Color',
                        key: 'color',
                        options: [
                            { value: 'Black', label: 'Black', img: 'https://images.unsplash.com/photo-1519125323398-675f0ddb6308' },
                            { value: 'Silver', label: 'Silver', img: 'https://images.unsplash.com/photo-1465101046530-73398c7f28ca' },
                            { value: 'Gold', label: 'Gold', img: 'https://images.unsplash.com/photo-1465101046530-73398c7f28ca' },
                            { value: 'Blue', label: 'Blue', img: 'https://images.unsplash.com/photo-1465101046530-73398c7f28ca' }
                        ] as Array<{ value: string; label: string; img?: string }>
                    },
                    {
                        name: 'Size',
                        key: 'size',
                        options: [
                            { value: '40mm', label: '40mm' },
                            { value: '44mm', label: '44mm' },
                            { value: '46mm', label: '46mm' }
                        ] as Array<{ value: string; label: string; img?: string }>
                    },
                    {
                        name: 'Strap Material',
                        key: 'strap',
                        options: [
                            { value: 'Steel', label: 'Steel' },
                            { value: 'Leather', label: 'Leather' },
                            { value: 'Silicone', label: 'Silicone' }
                        ] as Array<{ value: string; label: string; img?: string }>
                    }
                ]
            },
        }
    },
    methods: {
        scrollThumbs(direction: 'left' | 'right') {
            const el = this.thumbsRef;
            if (!el) return;
            const scrollAmount = 100 * 3; // 每次滚动3个缩略图宽度
            if (direction === 'left') {
                el.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
            } else {
                el.scrollBy({ left: scrollAmount, behavior: 'smooth' });
            }
        },
        selectSku(key: string, value: string) {
            this.selectedSku = { ...this.selectedSku, [key]: value };
        },
    }
});
</script>